<template>
    <a-card>
        <a-form class="ant-table-list-search-form-inline" :form="form" layout="inline" @submit="handleSearch">
            <a-form-item label="搜索栏">
                <a-input placeholder="请输入搜索内容" v-decorator="['name']"/>
            </a-form-item>
            <a-form-item class="text-left">
                <a-button type="primary" html-type="submit">查询</a-button>
                <a-button class="ml-10" @click="handleReset">重置</a-button>
            </a-form-item>
        </a-form>
        <div class="ant-table-list-operator">
            <a-button icon="download">下载模板</a-button>
            <a-button icon="export">导入</a-button>
            <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
            <a-button type="danger" icon="delete" @click="deleteBatch">批量删除</a-button>
        </div>
        <a-alert type="info" showIcon v-if="selectedRowKeys.length>0" class="mb-15">
            <div slot="message">已选择 {{selectedRowKeys.length}} 项
                <a href="javascript:;" @click="onClearSelected" class="ml-20">清空</a>
            </div>
        </a-alert>
        <!--普通表格-->
        <a-table :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                 :columns="columns"
                 :pagination="pagination"
                 :dataSource="dataSource"
                 :loading="loading"
                 @change="onTableChange">
            <template slot="index" slot-scope="text,record,index">
                {{(index+1)+(pagination.current-1)*pagination.pageSize}}
            </template>
            <template slot="created" slot-scope="created">{{created|moment("YYYY-MM-DD")}}</template>
            <template slot="action" slot-scope="text,record">
                <div class='editable-row-operations'>
                    <a @click="handleEdit(record)">编辑</a>
                    <a-divider type="vertical"/>
                    <a-popconfirm title="确认要删除吗?" @confirm="handleDelete(record.key)">
                        <a href="javascript:;" class="fc-red">删除</a>
                    </a-popconfirm>
                </div>
            </template>
        </a-table>
        <AddOrEditModal v-if="modalVisible" v-model="modalVisible" :record="record" @ok="handleFormEdited"/>
    </a-card>
</template>

<script>
    import AddOrEditModal from "./components/addOrEditModal";
    import {tableListMixin} from "../../../mixins/tableListMixin";

    const columns = [
        {title: '#', dataIndex: 'index', key: 'index', scopedSlots: {customRender: 'index'}},
        <#list columns as d>
        <#if d.colName!='updateTime'&& d.colName!='status'>{title: '${d.remark}', dataIndex: '${d.colName}', key: '${d.colName}'},</#if>
		</#list>
        {title: '操作', dataIndex: 'action', key: 'action', scopedSlots: {customRender: 'action'}},
    ];

    export default {
        name: "index",
        mixins: [tableListMixin],
        components: {AddOrEditModal},
        data() {
            return {
                queryParam: {},
                listUrl: '${requestPrefix}/${tableSubName?uncap_first}/get${tableSubName?cap_first}ListData',
                columns,
                modalVisible: false,
            }
        },
        methods: {
            handleAdd() {
                this.record = {};
                this.modalVisible = true
            },
            handleEdit(record) {
                this.record = record;
                this.record['id']=record.key;
                this.modalVisible = true;
            },
            handleDelete(id){
                let self=this;
                self.postAction('${requestPrefix}/${tableSubName?uncap_first}/remove', {id: id}).then(res => {
                    self.$message.success(res.msg);
                    self.loadData()
                });
            },
            deleteBatch(){
                this.batch('${requestPrefix}/${tableSubName?uncap_first}/deleteBatch');
            }

        },
    }
</script>

<style lang="less">

</style>
